// 弹出审核意见

<template>
  <van-popup v-model="visible" get-container="body" position="bottom">
    <van-cell-group>
      <van-form ref="form">
        <van-field
          v-model="selectUser.comment"
          rows="5"
          :required="required"
          :rules="[{ required: required, message: '请填写' }]"
          autosize
          :label="label"
          type="textarea"
          placeholder="请输入"
        />
        <van-field
          readonly
          clickable
          :required="required"
          name="datetimePicker"
          :value="selectUser.leastReplyDate"
          label="下次整改时间"
          placeholder="点击选择时间"
          @click="showPicker = true"
          v-if="showDate"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            type="date"
            @confirm="onConfirm"
            :min-date="minDate"
            :max-date="maxDate" :value="currentDate"
            @cancel="showPicker = false"
          />
        </van-popup>
    </van-form>
    </van-cell-group>
    <van-field
      v-model="keyWord"
      v-if="isPic"
      readonly
      required
      class="label-all file"
      name="datetimePicker"
      label="退货拍照"
    >
      <div slot="input" class="input-cell"></div>
    </van-field>
    <qm-file-upload
      v-if="isPic"
      ref="uploadPic"
      :actionsOneGroup="[1, 2]"
      :galleryOptions="{ multiple: true, maximum: 9 }"
      :params="{
        type: 'attach',
        dataKey: dataKey,
        bizType: bizType,
      }"
    >
    </qm-file-upload>
    <div style="margin: 16px">
      <van-button round block type="info" @click.native="fnSave()"
        >提交</van-button
      >
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true,
    },
    isPic: { type: Boolean, default: false },
    label: {
      type: String,
      default: "审核意见",
    },
    dataKey: {
      type: String,
      default: "",
    },
    bizType: {
      type: String,
      default: "",
    },
    selectUser: {
      type: Object,
      default: (_) => {
        return {
          comment: "",
        };
      },
    },
    // 操作后自动关闭组件
    autoClose: {
      type: Boolean,
      default: true,
    },
    required:{
      type:Boolean,
      default: true
    },
    // 退回时选择的日期
    showDate:{
      type:Boolean,
      default: false
    }
  },
  data() {
    return {
      keyWord: "",
      showPicker:false,
      minDate: new Date(2024, 1, 1),
      maxDate: new Date(2080, 12, 1),
      currentDate: new Date(),
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    onConfirm(time) {
      this.selectUser.leastReplyDate = this.$formatter.formatDate(time,"yyyy-MM-dd");
      this.showPicker = false;
    },
    // 关闭组件
    fnColse() {
      this.visible = false;
    },
    // 提交
    fnSave() {
      //   this.autoClose && this.fnColse();
      this.$refs.form.validate().then((valid)=>{
        this.$emit("save");
      }).catch((err) => {
          console.log(err);
          this.$toast('请填写必填项！')
      });
    },
  },
};
</script>
<style lang="less" scoped>
@deep: ~">>>";
@{deep} .pic_upload {
  margin: 0;
}
.file::after {
  border-bottom: none;
}
@{deep} .van-cell__value{
  color: #323233;
}
</style>
